import {
  StyleSheet,
  Text,
  View,
  Pressable,
  Image,
  TextInput,
  Dimensions
} from 'react-native'
import React, { useEffect, useState, useRef } from 'react'
import { useRouter, Link } from 'expo-router';
import axios from 'axios';
import { Button, Carousel } from '@ant-design/react-native'

import AsyncStorage from '@react-native-async-storage/async-storage'





axios.defaults.baseURL = "http://192.168.141.150:3000/lzl"
export default function cate() {

  useEffect(() => {
    getcate()
    getlist()
  }, [])

  const router = useRouter();

  const [catelist, setcatelist] = useState([])
  const [cateactive, setcateactive] = useState(' ')
  const [cateactiveid, setcateactiveid] = useState('670c64ac689c4ceab4c5cf91')
  const [goodlist, setgoodlist] = useState([])

  let [selectedIndex, setselectedIndex] = useState(2)
  let [autoplay, setautoplay] = useState(true)
  let carousel = useRef(null)

  let onHorizontalSelectedIndexChange = (index: number) => {
    /* tslint:disable: no-console */
    setselectedIndex(index)
  }


  let getcate = async () => {
    let { data } = await axios.get('http://192.168.13.227:3000/lzl/getcate')
    setcatelist(data);
  }

  let getlist = async () => {
    let { data } = await axios.get('http://192.168.13.227:3000/lzl/getList')
    setgoodlist(data);
  }

  let Catelistrouter = async (item: any) => {
    let itemid = catelist.find((ele: any) => (ele.name === item))
    AsyncStorage.setItem('itemid', JSON.stringify(itemid));
    router.push('/HomeModel/Catelist')
  }

  return (
    <View>
      <View style={styles.Input}>
        <TextInput
          onFocus={() => (
            router.push('/HomeModel/Search')
          )}
          style={styles.search}
          placeholder='精选天然水果'
        />
      </View>
      <View style={styles.content}>
        <View style={styles.leftbox}>
          {
            catelist.map((item: any) => (
              <View key={item._id}>
                {
                  item.name === ' '
                    ?
                    <Text
                      style={
                        cateactive === item.name
                          ?
                          styles.activecatebox
                          :
                          styles.catebox
                      }
                      onPress={() => (setcateactive(item.name), setcateactiveid(item._id))}
                    >
                      推荐
                    </Text>
                    :
                    <Text
                      style={
                        cateactive === item.name
                          ?
                          styles.activecatebox
                          :
                          styles.catebox
                      }
                      onPress={() => (setcateactive(item.name), setcateactiveid(item._id))}
                    >
                      {item.name}
                    </Text>
                }
              </View>
            ))
          }
        </View>
        <View style={styles.rightbox}>
          {/* 轮播图 */}
          <View>
            <Carousel
              style={styles.wrapper}
              selectedIndex={selectedIndex}
              autoplay
              infinite
              afterChange={() => (onHorizontalSelectedIndexChange)}
              ref={carousel}>
              <View
                style={[styles.containerHorizontal, { backgroundColor: 'red' }]}>
                <Image style={styles.imgsize} source={require("@/assets/img//u1721.jpg")} />
              </View>
              <View
                style={[styles.containerHorizontal, { backgroundColor: 'blue' }]}>
                <Image style={styles.imgsize} source={require("@/assets/img/u1722.jpg")} />
              </View>
            </Carousel>
          </View>

          <View style={{ width: "100%", height: 1000, marginTop: 10 }}>
            <View>
              <Text onPress={() => (AsyncStorage.setItem('itemid', JSON.stringify('all')),router.push('/HomeModel/Catelist'))} style={{ fontSize: 20, fontWeight: "bold" }}>更多</Text>
            </View>
            {
              cateactive === ' ' || cateactive === '水果类'
                ?
                <Pressable
                  onPress={() => (Catelistrouter('水果类'))}
                  style={{
                    width: "100%", marginTop: 10, backgroundColor: "#faffef",
                    borderRadius: 10, flexDirection: "row", flexWrap: "wrap",
                    justifyContent: "space-between"
                  }}>
                  <View style={{ width: "100%" }}>
                    <Text>水果类：</Text>
                  </View>
                  {
                    goodlist.filter((ele: any) => ele.cid.name === "水果类").slice(0, 3).map((item: any) => (
                      <Pressable key={item._id} style={{}} >
                        <Image
                          style={{ width: 50, height: 50, borderRadius: 10, }}
                          source={{ uri: item.img[0] }}
                        />
                        <Text style={{ fontSize: 12, textAlign: "center" }}>{item.name}</Text>
                      </Pressable>
                    ))
                  }
                </Pressable>
                : null
            }

            {
              cateactive === ' ' || cateactive === '蔬菜类'
                ?
                <Pressable
                  onPress={() => (Catelistrouter('蔬菜类'))}
                  style={{
                    width: "100%", marginTop: 10, backgroundColor: "#faffef",
                    borderRadius: 10, flexDirection: "row", flexWrap: "wrap",
                    justifyContent: "space-between"
                  }}>
                  <View style={{ width: "100%" }}>
                    <Text>蔬菜类：</Text>
                  </View>
                  {
                    goodlist.filter((ele: any) => ele.cid.name === "蔬菜类").slice(0, 3).map((item: any) => (
                      <View key={item._id} style={{}}>
                        <Image
                          style={{ width: 50, height: 50, borderRadius: 10, }}
                          source={{ uri: item.img[0] }}
                        />
                        <Text style={{ fontSize: 12, textAlign: "center" }}>{item.name}</Text>
                      </View>
                    ))
                  }
                </Pressable>
                : null
            }

            {
              cateactive === ' ' || cateactive === '干果类'
                ?
                <Pressable
                  onPress={() => (Catelistrouter('干果类'))}
                  style={{
                    width: "100%", marginTop: 10, backgroundColor: "#faffef",
                    borderRadius: 10, flexDirection: "row",
                    flexWrap: "wrap", justifyContent: "space-between"
                  }}>
                  <View style={{ width: "100%" }}>
                    <Text>干果类：</Text>
                  </View>
                  {
                    goodlist.filter((ele: any) => ele.cid.name === "干果类").slice(0, 3).map((item: any) => (
                      <View key={item._id} style={{}}>
                        <Image
                          style={{ width: 50, height: 50, borderRadius: 10, }}
                          source={{ uri: item.img[0] }}
                        />
                        <Text style={{ fontSize: 12, textAlign: "center" }}>{item.name}</Text>
                      </View>
                    ))
                  }
                </Pressable>
                : null
            }

            {
              cateactive === ' ' || cateactive === '油粮类'
                ?
                <Pressable
                  onPress={() => (Catelistrouter('油粮类'))}
                  style={{
                    width: "100%", marginTop: 10, backgroundColor: "#faffef",
                    borderRadius: 10, flexDirection: "row", flexWrap: "wrap",
                    justifyContent: "space-between"
                  }}>
                  <View style={{ width: "100%" }}>
                    <Text>油粮类：</Text>
                  </View>
                  {
                    goodlist.filter((ele: any) => ele.cid.name === "油粮类").slice(0, 3).map((item: any) => (
                      <View key={item._id} style={{}}>
                        <Image
                          style={{ width: 50, height: 50, borderRadius: 10, }}
                          source={{ uri: item.img[0] }}
                        />
                        <Text style={{ fontSize: 12, textAlign: "center" }}>{item.name}</Text>
                      </View>
                    ))
                  }
                </Pressable>
                : null
            }
          </View>
        </View>
      </View>
    </View >

  )
}

const styles = StyleSheet.create({
  Input: {
    height: 60,
    backgroundColor: "#99cc33",
    position: "relative",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 15,
    zIndex: 999
  },
  search: {
    width: Dimensions.get('window').width - Dimensions.get('window').width / 2.5,
    borderWidth: 0,
    paddingHorizontal: 15,
    borderRadius: 50,
    backgroundColor: '#fff',
  },
  content: {
    height: Dimensions.get('window').height,
    flexDirection: 'row',
  },
  leftbox: {
    width: Dimensions.get('window').width / 3,
    backgroundColor: '#f4f8ff',
    height: "100%"
  },
  rightbox: {
    padding: 10,
    width: Dimensions.get('window').width - Dimensions.get('window').width / 3,
    backgroundColor: '#fff',
    height: "100%"
  },
  catebox: {
    width: "100%",
    height: 70,
    lineHeight: 70,
    textAlign: "center",
  },
  activecatebox: {
    width: "100%",
    height: 70,
    lineHeight: 70,
    textAlign: "center",
    color: "#a8cd3a",
    backgroundColor: "#fff",
    borderLeftWidth: 4,
    borderLeftColor: '#97ca32'
  },

  // 小轮播图
  imgsize: {
    width: "100%",
    height: 100,
    borderRadius: 10
  },
  wrapper: {
    backgroundColor: '#fff',
    width: '100%',
    height: 100,
    borderRadius: 20
  },
  containerHorizontal: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 100,
    borderRadius: 10

  },
  text: {
    color: '#fff',
    fontSize: 36,
  },
})